<script setup>

import {onMounted, ref} from "vue";
import {doForm, doGet} from "@/util/request.js";

import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";
//路由
const router = useRouter()
//表单对象
let payWayTableData = ref([])
//分页
let totalPage = ref(1)
// 分页参数
const onPageChange = (number) => {
  loadPayWays(number)
}
//加载数据
const loadPayWays = (pageNo) => {
  const params = {
    pageNo: pageNo,
    pageSize: 10
  }
  doGet('/payConfig/pageList', params).then(resp => {
    if (resp.data.code === 200) {
      payWayTableData.value = resp.data.data.list
      totalPage.value = resp.data.data.page.totalPages
    }
  })
}


//新增支付配置
const onAddProduct = () => {
  //跳转
  router.push('/index/pay/config/add')
}
/*查看支付配置*/
//查看支付配置弹窗控制
const dialogTableVisible = ref(false)
//表单数据对象
const gridData = ref([])

function onShowPayInfo(row) {
  let data = {
    userNo: row.userNo,
    productCode: row.productCode
  }
  // 加载数据
  doGet('/payConfig/configView', data).then(resp => {
    if (resp.data.code === 200) {
      gridData.value = resp.data.data
      dialogTableVisible.value = true
    }
  })
}

//删除支付配置
function onDeleteWay(row) {
  let data = {
    userNo: row.userNo,
    productCode: row.productCode
  }
  // 删除支付配置
  ElMessageBox.confirm('确定删除吗？').then(() => {
    doForm('/payConfig/delete', data).then(resp => {
      if (resp.data.code === 200) {
        ElMessage.success('删除成功')
        loadPayWays(1)
      } else {
        ElMessage.error('删除失败' + resp.data.msg)
      }
    })
  })
}

onMounted(() => {
  loadPayWays(1)
})
</script>

<template>
  <el-button style="margin-left: 20px" type="primary" @click="onAddProduct">新增商户配置</el-button>

  <!------------------------产品支付方式列表------------------------------------->
  <el-table
      ref="userTable"
      :data="payWayTableData"
      border stripe
      style="width: 100%;margin-top: 15px">
    <el-table-column prop="userNo" label="商户号" align="center"/>
    <el-table-column prop="shopName" label="商户名称" align="center"/>
    <el-table-column prop="productCode" label="支付产品编码" width="110px" align="center"/>
    <el-table-column prop="productName" label="支付产品名称" align="center"/>
    <el-table-column prop="riskDay" label="续存期" width="100px" align="center"/>
    <el-table-column prop="appKey" label="商户key" align="center"/>
    <el-table-column prop="appSecret" label="商户密钥" align="center"/>
    <el-table-column prop="merchantServerIp" label="商家白名单" align="center"/>
    <el-table-column prop="autoSett" label="自动结算" width="100px" align="center"/>
    <el-table-column prop="editTime" label="编辑时间" align="center"/>
    <el-table-column label="操作" align="center">
      <!--编辑&详情&删除按钮-->
      <template #default="scope">
        <el-button size="small" plain type="success" @click="onShowPayInfo(scope.row)">查看支付配置</el-button>
        <el-button size="small" type="danger" @click="onDeleteWay(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!---------------------------------分页--------------------------------------->
  <el-pagination
      background
      size="small"
      layout="prev, pager, next"
      :page-count="totalPage"
      :page-size="20"
      style="margin-top: 15px"
      @current-change="onPageChange"/>
  <!---------------------------------分页--------------------------------------->
  <!------------------------查看支付配置弹窗------------------------------------->
  <el-dialog v-model="dialogTableVisible" title="查看支付配置" center width="900">
    <el-table :data="gridData" border stripe>
      <el-table-column property="payWayCode" label="支付方式编号" width="110px" align="center"/>
      <el-table-column property="payWayName" label="支付方式名称" width="110px" align="center"/>
      <el-table-column property="payConfig" label="第三方配置参数" align="center"/>
      <el-table-column property="remark" label="备注" width="160px" align="center"/>
    </el-table>
  </el-dialog>

</template>

<style scoped>

</style>